<template>
 <div style="width:100%;height:100%;" @click="clickWhole">
    <div class="publishInfo" v-show="!$attrs.isShow">
      <span class="leftinfo"></span>
      <div
        class="rightInfo"
        :style="{
          fontSize: $attrs.fontSizeModule,
          color: $attrs.backColorModule,
          fontWeight: $attrs.boldModule ? 'bold' : 'normal',
          fontStyle: $attrs.italicModule ? 'italic' : 'normal',
          textDecoration: $attrs.underlineModule ? 'underline' : 'none',
          textAlign: $attrs.textAlignModule,
          lineHeight: $attrs.lineHeightModule,
        }"
           >
        {{ $attrs.moduleName }}
      </div>
   </div>
    <van-grid style="padding-top:10px" :column-num="columnNum" :gutter="0" :border='false'>
      <van-grid-item  class="grid" v-for="(value,index) in bottomData" :key="index" :icon="value.icon" :text="value.name" @click.stop="clickList(value,index)" >
        <div class="menuItem" :style="`background:linear-gradient(180deg,${colorArr[(index+1)%8]} 100%)`">
          <svg-icon 
            slot="prefix" 
            :icon-class="value.icon?value.icon:'quickMenu'" 
            class="el-input__icon"
            style="height: 32px; width: 24px" 
          />
        </div>
        <div class="name" :title="value.name" :style="{'width': columnNum===3?'95px':(columnNum===4?'60px':'45px') }" v-show="!bottomData[index].isShowListTitle">
          {{value.name}}
        </div>
      </van-grid-item>
    </van-grid>
 </div>
</template>
<script>
// import img from "@/assets/images/ydlogo.png";
export default {
  props: {
    columnNum:{
      type: Number,
      default: "",
    },
    bottomData:{
      type:Array,
      default:function(){
        return [];
      }
    },
    isShowStyle:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      colorArr:['#b9a0ff, #9281ff','#90cafa, #5795f8','#9ddd49, #7ecb45','#ffe06c, #ffb63d','#ffa0ce, #ec8283',
    '#ffab75, #ff7d67','#7bf9f1, #46d3f2','#79afff, #4a92ff']
      // img
    };
  },
  mounted() {
   
  },
  watch: {
   bottomData:{
     handler(val){
      //  console.log(val)
     }
   }
  },
  methods: {
    clickList(value,index){
      this.$emit('input',index)
      this.$emit('handleStyle',true);
      if(Array.isArray(value.childMenus) && value.childMenus.length){
        this.$emit('functionMenuRend',value.childMenus);
      }else{
        if(this.$store.state.mobile.userAgent ==='mobile'){
        this.$router.push(value.path)
      }
      }
    },
    clickWhole(){
      this.$emit('handleStyle',false);
    }
  },
};
</script>

<style lang="scss" scoped>
  .publishInfo{
    display:flex;
    flex-wrap: nowrap;
    margin:15px 10px;
    .leftinfo{
      width:3px;
      background:#1890FF;
      flex:none;
    }
    .rightInfo{
      flex:1;
      word-break: break-all;
      font-weight: bold;
      margin-left:6px;
      font-size: 16px;
    }
  }
  .grid{
    cursor: pointer;
    color: #FFFFFF;
  }
  .title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: CENTER;
    padding: 3% 3% 0 3%;
    color: #000000;
  }
  .menuItem {
    width: 50px;
    height: 50px;
    background: #1F78FE;
    border-radius: 50% ;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .name {
    text-align: center;
    margin-top: 5%;
    color:#000000;
    overflow-x:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // -webkit-line-clamp: 1;
    // -webkit-box-orient: vertical;
  }
  .rightInfo{
    flex:1;
    word-break: break-all;
    font-weight: bold;
    margin-left:6px;
  }
</style>